<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../刘佳富/Css/reset.css">
    <style>
        .top-box {
            height: 40px;
            background-color: slategray;
        }

        .countent {
            width: 1226px;
            margin: 0 auto;
        }

        .row {
            display: flex;
        }

        .column {
            display: flex;
            flex-direction: column;
        }

        .grid {
            display: grid;
        }

        .top-nav {
            justify-content: space-between;
        }

        /* 顶部 */
        .left-nav {
            height: 40px;
            width: 769px;
            background-color: aqua;
        }

        .right-nav {
            height: 40px;
            background-color: rgb(3, 59, 59);
            width: 150px;
        }

        /* 顶部end */

        /* 导航栏 */
        .con-navs {
            justify-content: space-between;
            height: 100px;
            align-items: center;
            background-color: rgb(12, 132, 206);
        }

        .navs-log {
            width: 150px;
            height: 50px;
            background-color: rgb(3, 90, 87);
        }

        .navs-box {
            flex: 0.8;
            background-color: aqua;
            height: 50px;
        }

        .navs-input {
            background-color: aquamarine;
            width: 200px;
            height: 50px;
        }

        /* 轮播图 */
        .lunbo-box {
            height: 460px;
            background-color: pink;
            position: relative;
        }

        .lunbo-left {
            position: absolute;
            background-color: rgb(196, 184, 167);
            width: 234px;
            height: 460px;
            box-sizing: border-box;
            padding: 20px 0;
        }

        .lunbo-ul {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

        .lunbo-ul>li {
            width: 234px;
            height: 40px;
            background-color: rgb(173, 104, 104);
        }

        /* 精选图 */
        .jxt-boxs {
            height: 170px;
            background-color: pink;
            justify-content: space-between;
            align-items: center;
            margin-top: 14px;
        }

        .jxt-box1 {
            background-color: aqua;
            height: 170px;
        }

        .grid-jx {
            background-color: rgba(71, 72, 71, 0.972);
            width: 234px;
            display: grid;
            grid-template-columns: repeat(3, 70px);
            grid-gap: 5px;
            justify-content: center;
            align-content: center;
        }

        .jxt-box2 {
            width: 316px;
        }

        .jx {
            /* width: 70px; */
            height: 82px;
            background-color: rgb(130, 133, 133);
            padding: 0 3px;
        }

        /* <!-- 内容区 --> */
        .cuntiner {
            margin-top: 30px;
            background-color: #f5f5f5;
            box-sizing: border-box;
            overflow: hidden;
        }

        /* 广告 */
        .ggw {
            background-color: rgb(55, 52, 53);
            height: 120px;
            margin-top: 30px;
            margin-bottom: 20px;
        }

        .cuntiner-biaoti {
            width: 100%;
            height: 70px;
            background-color: pink;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
        }

        .biaoti {
            height: 58px;
            width: 100px;
        }

        .biaoti-left {
            background-color: rgb(5, 91, 144);
        }

        .biaoti-right {
            background-color: rgb(3, 53, 53);
        }

        .cuntiner-pinano {
            width: 100%;
            height: 614px;
            background-color: aqua;
            justify-content: space-between;
        }

        .pinano-left {
            background-color: bisque;
            width: 234px;
        }

        /* .pinano-right {
            margin-left: 14px;
        } */

        .black-list {
            /* width: 992px; */
            grid-template-columns: repeat(4, 234px);
            grid-gap: 14px;
        }

        .black-list>li {
            background-color: rgb(178, 7, 178);
            /* width: 234px; */
            height: 260px;
            padding: 20px 0;
        }

        .basec-list {
            height: 614px;
            width: 234px;
            justify-content: space-between;
        }

        .basec-list>li {
            height: 300px;
            background-color: bisque;
        }

        .ulset>li:last-child {
            background-color: transparent;
            padding: 0;
        }

        .inset-list {
            height: 300px;
            justify-content: space-between;
        }

        .inset-list>li {
            width: 234px;
            height: 143px;
            background-color: rgb(125, 5, 173);
        }
    </style>
</head>

<body>
    <header>
        <!-- 顶部 -->
        <div class="top-box">
            <div class="countent">
                <div class="row top-nav">
                    <div class="left-nav"></div>
                    <div class="right-nav"></div>
                </div>
            </div>
        </div>

        <!-- 导航栏 -->
        <div class="countent">
            <div class="row con-navs">
                <div class="navs-log"></div>
                <div class="navs-box"></div>
                <div class="navs-input"></div>
            </div>
        </div>

        <!-- 轮播图 -->
        <div class="countent">
            <div class="row lunbo-box">
                <div class="lunbo-left">
                    <ul class="lunbo-ul">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 精选图 -->
        <div class="countent">
            <div class="row jxt-boxs">
                <div class="jxt-box1 grid-jx">
                    <div class="jx"></div>
                    <div class="jx"></div>
                    <div class="jx"></div>
                    <div class="jx"></div>
                    <div class="jx"></div>
                    <div class="jx"></div>
                </div>
                <div class="jxt-box1 jxt-box2"></div>
                <div class="jxt-box1 jxt-box2"></div>
                <div class="jxt-box1 jxt-box2"></div>
            </div>
        </div>

        <!-- 内容区 -->
        <!-- 广告位 -->
        <div class="cuntiner">
            <div class="countent">
                <div class="ggw"></div>
            </div>

            <!-- 主内容区 -->
            <div class="countent">
                <div class="column">
                    <div class="cuntiner-biaoti">
                        <div class="biaoti biaoti-left"></div>
                        <div class="biaoti biaoti-right"></div>
                    </div>
                    <div class="row cuntiner-pinano">
                        <div class="pinano-left"></div>
                        <div class="pinano-right">
                            <ul class="black-list grid">
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 广告区 -->
            <div class="countent">
                <div class="ggw"></div>
            </div>

            <div class="countent">
                <div class="column">
                    <div class="cuntiner-biaoti">
                        <div class="biaoti biaoti-left"></div>
                        <div class="biaoti biaoti-right"></div>
                    </div>
                    <div class="row cuntiner-pinano">
                        <div class="pinano2-left">
                            <ul class="basec-list column">
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                        <div class="pinano-right">
                            <ul class="black-list grid ulset">
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li>
                                    <ul class="inset-list column">
                                        <li></li>
                                        <li></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 广告区 -->
            <div class="countent">
                <div class="ggw"></div>
            </div>

            <div class="countent">
                <div class="column">
                    <div class="cuntiner-biaoti">
                        <div class="biaoti biaoti-left"></div>
                        <div class="biaoti biaoti-right"></div>
                    </div>
                    <div class="row cuntiner-pinano">
                        <div class="pinano2-left">
                            <ul class="basec-list column">
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                        <div class="pinano-right">
                            <ul class="black-list grid ulset">
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>

                                <li>
                                    <ul class="inset-list column">
                                        <li></li>

                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 广告区 -->
            <div class="countent">
                <div class="ggw"></div>
            </div>
        </div>


    </header>
</body>

</html>